<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动元素</title>
	</head>
	<body>
			<ul id="List1">
				<li>兰花</li>
				<li>桂花</li>
	            <li>菊花</li>
			</ul>
			<ul id="List2">
				<li>松树</li>
				<li>柏树</li>
			</ul>
			<button onclick="moveBaiShu()">点击开始移动</button>
			<script>
				function moveBaiShu() {
					// 获取“柏树”元素
					var baiShu = document.querySelector('#List2 li:nth-child(2)');
					// 获取“兰花”元素
					var lanHua = document.querySelector('#List1 li:nth-child(1)');
					
					// 如果“柏树”和“兰花”都存在
					if (baiShu && lanHua) {
						// 先从原来的列表中移除“柏树”
						baiShu.parentNode.removeChild(baiShu);
						// 将“柏树”插入到“兰花”之前
						lanHua.parentNode.insertBefore(baiShu, lanHua);
					}
				}
			</script>
		</body>
</html>